<template>
	<view class="content">
		<view class="list info">
		    <view>订单编号</view>
		    <view>订单编号: {{orderSn}}</view>
		</view>
		<view class="list info">
		    <view>售后详情 </view>
		    <view>申请原因：{{detail.reason}}</view>
		</view>
		<view class="list info">
		    <view>物流信息 </view>
		    <view>物流公司：{{detail.deliveryCorp==null?'':detail.deliveryCorp}}</view>
			<view>物流单号：{{detail.trackingN==null?'':detail.trackingNo}}</view>
		</view>
		<view class="list info" v-if="imgList.length > 0">
		    <view style="margin-bottom: 20rpx;">图片信息</view>
		    <image v-for="src,index in imgList" :key="index" :src="baseUrl + src"></image>
		</view>
		<view class="list">
			<view class="ul2" v-for="(item,index) in order.orderItems">
			    <view class="li"><image :src="baseUrl + item.thumbnail"></image></view>
			    <view class="li">
			        <view class="name">{{item.name}}</view>
			        <view class="zl">重量：{{item.weight}}g</view>
			    </view>
			    <view class="li">¥{{item.price}}</view>
			    <view class="li">x{{item.quantity}}</view>
			    <view class="li">￥{{item.totalPrice}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		aftersalesDetail
	} from '@/api/order.js'
	export default {
		data() {
			return {
				orderSn: '',
				order: {},
				detail: {},
				imgList: [],
				baseUrl: this.$baseUrl
			}
		},
		onLoad(options) {
			this.orderSn = options.sn
			this.init()
		},
		methods: {
			init() {
				aftersalesDetail({orderSn: this.orderSn}).then(res => {
					this.order = res.data.order
					this.detail = res.data.aftersales[0]
					if(this.detail.images !== '') {
						this.imgList = this.detail.images.split(';')
						if(this.imgList.length > 1) {
							this.imgList.splice(this.imgList.length - 1, 1)
						}
					}
				})
			}
		}
	}
</script>

<style>
.content {
	padding-bottom: 30rpx;
	background-color: #F8F9FA;
}
.list {
	padding: 30rpx;
	margin-top: 30rpx;
	background-color: #fff;
}
.list view {
	line-height: 1.8;
}
.list.info view:not(:first-child) {
	color: #999;
}
.list image {
	width: 150rpx;
	height: 150rpx;
	margin: 0 15rpx 15rpx 0;
}
.ul2 {
    /* border: 1px solid #EDEDED; */
    background-color: #fff;
    display: flex;
    align-items: center;
}

.ul2 .li:nth-child(1) image {
    margin-right: 20rpx;
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 0;
}

.ul2 .li:nth-child(2) view:nth-child(2) {
    color: #999;
    /* font-size: 14rpx; */
}

.ul2 .li:nth-child(3) {
    flex-grow: 4;
    text-align: center;
    /* font-size: 14rpx; */
    padding: 0 20rpx;
}

.ul2 .li:nth-child(4) {
    flex-grow: 2;
    padding: 0 20rpx;
    /* font-size: 14rpx; */
}


.ul2 .li:nth-child(5) {
    /* font-size: 14rpx; */
    color: #D30500;
}
</style>
